import { BrowserRouter, Routes, Route, Link, useNavigate } from 'react-router-dom'  //直接用export抛出的，所以要加{}，引入路由
import './App.css';
import Home from './views/Home.jsx'
import About from './views/About.jsx'
import User from './views/User.jsx'
function App() {

  return (
    <div>
      <BrowserRouter>
        {/* 路由里面的所有组件都要在BrowserRouter里面 */}
        <Link to="/home" >首页</Link>
        <Link to="/about" >关于</Link>
        <Routes>
          {/* Route必须放在Routes内部使用 */}
          {/* 当浏览器的地址栏时/home时，加载Home组件 */}
          <Route path="/home" element={<Home></Home>} ></Route>
          {/* 当浏览器的地址栏时/about时，加载About组件 */}
          <Route path="/about" element={<About></About>} ></Route>
          <Route path="/user" element={<User></User>} ></Route>
        </Routes>
      </BrowserRouter>

    </div>
  )
}

export default App;
